<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-12-列表渲染</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>

<div id="root">
    <h3>人员列表</h3>
    <button v-on:click.once="updateMsg1">更改周杰伦的信息</button>
    <button v-on:click.once="updateMsg2">更改周杰伦的信息</button>
    <ul>
        <!-- 可以使用 persons 列表中的 id 作为遍历时的 key -->
        <li v-for="(person, index) in persons" :key="person.id">
            {{ index + 1 }}. {{ person.name }}: {{ person.age }} | {{person.sex}}
        </li>
    </ul>
    <h3>爱好列表</h3>
    <button @click.once="addHobby()">添加一个爱好</button>
    <button @click.once="updateHobby()">更改烫头的爱好</button>
    <ul>
        <li v-for="(hobby, index) in hobbys" :key="index">
            {{ hobby }}
        </li>
    </ul>
</div>

<script text="text/javascript">
    const vm = new Vue({
        el: '#root',

        data: {
            persons: [{
                id: '10001',
                name: '马冬梅',
                age: 19,
                sex: '女',
            }, {
                id: '10002',
                name: '周冬雨',
                age: 23,
                sex: '女',
            }, {
                id: '10003',
                name: '周杰伦',
                age: 21,
                sex: '男',
            }, {
                id: '10004',
                name: '温兆伦',
                age: 22,
                sex: '男',
            }],

            hobbys: [
                '抽烟',
                '喝酒',
                '烫头',
            ],
        },

        methods: {
            updateMsg1() {
                this.persons[2].age = 18
            },

            updateMsg2() {
                /*
                this.persons[2] = { // 直接等值代换会出现不能正常更新的情况
                    id: '10003',
                    name: '周杰伦',
                    age: 23,
                    sex: '男',
                }
                */

                this.persons.splice(2, 1, {
                    id: '10005',
                    name: '周星星',
                    age: 23,
                    sex: '男',
                })
            },

            /**
             * 数组可以调用以下函数操作数组里面的元素, Vue 的数据检测只承认以下函数, 然后才能实现响应式数据更新
             * Vue 的基础数据类型使用了拆装箱原理
             * push
             * pop
             * shift
             * unshift
             * splice
             * sort
             * reverse
             */

            addHobby() {
                this.hobbys.push('玩电脑')
                // Vue 中 data 数据中数组的 push 已经不是数组原型身上的 push
                console.log(this.hobbys.push === Array.prototype.push) // false
            },

            updateHobby() {
                // this.hobbys[2] = '理发' // 直接等值代换会出现不能正常更新的情况
                this.hobbys.splice(2, 1, '理发')
                // Vue 中 data 数据中数组的 splice 已经不是数组原型身上的 splice
                console.log(this.hobbys.splice === Array.prototype.splice) // false
            }
        },
    })
</script>
</body>
</html>